<template>
  <Modal v-model="modal.show" width="250" :title="modal.title" @on-ok="ok" @on-cancel="cancel">
    <space direction="vertical">
      <Form ref="form" :model="modal" :label-width="70">
        <FormItem prop="name" label="菜单名称"><Input v-model="modal.name" placeholder="请输入..." style="width: 150px" />
        </FormItem>
        <FormItem prop="icon" label="图标名称">
          <Poptip trigger="click" placement="bottom" width="1000" v-model="modal.visible">
            <Input v-model="modal.icon" placeholder="请点击..." style="width: 150px">
            <template #prefix>
              <Icon :type="modal.icon" />
            </template>
            </Input>
            <template #content>
              <IconList @send="send"></IconList>
            </template>
          </Poptip>
        </FormItem>
        <FormItem prop="name" label="路由名称">
          <Input v-model="modal.route_name" placeholder="请输入..." style="width: 150px" />
        </FormItem>
        <FormItem prop="path" label="路由地址">
          <Input v-model="modal.path" placeholder="请输入..." style="width: 150px" />
        </FormItem>
        <FormItem prop="component" label="组件路径">
          <Input v-model="modal.component" placeholder="请输入..." style="width: 150px" />
        </FormItem>
      </Form>
    </space>
  </Modal>
</template>
<script setup>
import http from '@/util/http'
import IconList from '@/components/system/Icon.vue'
import _ from 'lodash'
let { proxy } = getCurrentInstance()
const emit = defineEmits(['initTree'])
let modal = reactive({ show: false, title: '', name: '', icon: '', path: '', visible: false })
const menu = reactive({ data: { moduleID: '' } })
const form = ref()
const show = (menuObj, type, id) => {
  form.value.resetFields()

  modal.show = true
  var clone = _.cloneDeep(menuObj)
  menu.data = clone
  menu.data.type = type
  menu.data.moduleID = id

  if (type != -2) {
    modal.title = '添加菜单'
  } else {
    modal.title = '编辑菜单'
    http.get('/Basic/Menu/Detail?id=' + menuObj.id, {}, (response) => {
      modal.name = response.data.data.title
      modal.icon = response.data.data.icon
      modal.path = response.data.data.path
      modal.route_name = response.data.data.name
      modal.component = response.data.data.component
      modal.moduleID = response.data.data.moduleID
    })
  }
}

const ok = () => {
  console.log(menu.data)
  menu.data.title = modal.name
  menu.data.path = modal.path
  menu.data.icon = modal.icon
  menu.data.name = modal.route_name
  menu.data.component = modal.component
  http.post('/Basic/Menu/AddOrUpdate', toRaw(menu.data), (response) => {
    if (response.data.flag) {
      emit('initTree')
      proxy.$Message.success(response.data.msg)
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}

const send = (type) => {
  modal.visible = false
  modal.icon = type
}

defineExpose({
  show,
})
</script>